<template>
  <div class="app-container">
    <div class="eutr-header-tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="自动监测" name="autoIndex"></el-tab-pane>
        <el-tab-pane label="实验室监测" name="natureIndex"></el-tab-pane>
      </el-tabs>
      <div class="eutr-content">
        <div class="eutr-content-left">
          <leftTree
            :activeName="activeName"
            @tree-check-change="handleTreeCheckChange"
          />
        </div>
        <div class="eutr-content-right">
          <rightTable ref="rightTable" :activeName="activeName" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import leftTree from "./components/leftTree.vue";
import rightTable from "./components/rightTable.vue";
export default {
  components: {
    leftTree,
    rightTable,
  },
  data() {
    return {
      activeName: "autoIndex",
      checkedTreeNodes: [], // 存储选中的树节点
    };
  },
  methods: {
    // 处理树节点选中变化
    handleTreeCheckChange(nodes) {
      this.checkedTreeNodes = [...nodes];
      this.handleClick();
    },
    handleClick(val) {
      //当tab切换时，获取对应的表格组件并调用handleQuery方法重新加载数据
      this.$nextTick(() => {
        this.$refs.rightTable.handleQuery(this.checkedTreeNodes);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.eutr-content-left {
  width: 300px;
}

.eutr-content {
  display: flex;
  justify-content: space-around;
}

.eutr-content-right {
  width: calc(100% - 320px);
}
.header-btns {
  display: flex;
  margin-top: 10px;
}
</style>
